<template>
  <el-row ref="radarWrap" class="rightWrap">
    <el-row style="height: calc(100% - 32px)">
      <CommonTableNoPoint
        :data-list="dataList"
        :header-list="headerList"
        :title="'质差用户展示'"
        border
        style="width: 100%;background: rgba(24,66,107,0.59);"
      />
    </el-row>
    <el-row style="height: 26px;display: flex;justify-content: space-between;margin-top: 10px">
      <el-col>
        <el-button type="primary" size="mini">导出</el-button>
      </el-col>
      <el-pagination
        background
        small
        layout="prev, pager, next"
        :total="10">
      </el-pagination>
    </el-row>
  </el-row>
</template>

<script>
  import countTo from 'vue-count-to'
  import CommonTableNoPoint from '@c/CommonTableNoPoint'
  export default {
    name: "ThreeLeftTwo",
    components: {
      countTo,
      CommonTableNoPoint
    },
    data() {
      return {
        headerList: ['质差用户','网关型号','PING分数','丢包率'],
        dataList: [],
        chartName: [],
        total: '',
        online: '',
        radarWidth: '',
        radarHeight: ''
      }
    },
    created() {
      this.$bus.$off('provinceChanged')
      this.$bus.$on('provinceChanged', this.getProbes)
    },
    mounted() {
      this.getWidthAndHeight()
    },
    methods: {
      getWidthAndHeight() {
        const width =  this.$refs.radarWrap.$el.offsetWidth
        this.radarHeight =  this.$refs.radarWrap.$el.offsetHeight - 200 + 'px'
      },
      getProbes(code){
        window._api.apiProbes({ code }).then(res => {
          if (res.state === 'ok') {
            this.total = res.total
            this.online = res.online
            let keys = Object.keys(res.types)
            this.chartData = []
            this.chartName = []
            keys.map(item => {
              this.chartName.push(item)
              this.chartData.push(res.types[item])
            })
          } else {
            this.$message.warning('数据异常')
          }
        })
      }
    }
  }
</script>

<style scoped>
  .rightWrap{
    height: 58vh;
    background: rgba(0,33,135,0.24);
    border: 1px solid rgba(14,101,187,0.66);
    box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-content: space-between;
  }
</style>

